<template>
  <a-modal v-model:visible="visible" :title="modalTitle" width="35%" @ok="handleOk" @cancel="close">
    <a-form :model="formState" ref="formRef" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="类型" name="type" :rules="[{ required: true, message: '请选择' }]">
        <a-radio-group v-model:value="formState.type">
          <a-radio :value="1">同意</a-radio>
          <a-radio :value="2">拒绝</a-radio>
        </a-radio-group>
      </a-form-item>
      <!-- 1:仅退款，2:退款退货，3:换货 -->
      <a-form-item label="收货地址" name="addr_id" v-if="formState.refund_type !== 1"
        :rules="[{ required: true, message: '请选择收货地址' }]">
        <a-select v-model:value="formState.addr_id" placeholder="请选择收货地址">
          <a-select-option v-for="(item, index) in state.options" :key="index" :value="item.addr_id">{{ item.area }}{{
            item.addr_info }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="驳回理由" name="remark" v-if="formState.type == 2"
        :rules="[{ required: true, message: '请输入驳回理由' }]">
        <a-textarea v-model:value="formState.remark" placeholder="请输入驳回理由"></a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { reactive, ref } from "vue";
import { refundAudit, refundAddr } from "@/api/refund";
import { message } from "ant-design-vue";
import useModal from "@/utils/useModal";

const emits = defineEmits(["update"]);
const formRef = ref();
const { visible, modalTitle } = useModal();

const formState = reactive({
  addr_id: null,
  remark: "",
});
const state = reactive({
  options: [],
});
const handleOk = async () => {
  await formRef.value.validate();
  let params = {
    ...formState,
  };
  refundAudit(params).then((res) => {
    if (res.code == 0) {
      message.success(res.msg);
      emits("update");
      hide();
    }
  });
};

const show = (model) => {
  visible.value = true;
  modalTitle.value = model.title;
  resetForm(model);
  getAddrList();
};
const resetForm = function (values) {
  for (var i in values) {
    formState[i] = values[i];
  }
};
const getAddrList = () => {
  refundAddr().then((res) => {
    if (res.code == 0) {
      const data = res.data;
      state.options = data;
    }
  });
};
const hide = () => {
  visible.value = false;
  formRef.value.resetFields();
};
const close = () => {
  formRef.value.resetFields();
};
// 暴露方法
defineExpose({
  show,
});
</script>
